<template>
	<div class="hView">
		<header-bar tittle="忘记密码" />
		<div class="loginCo">
			<div >
				<van-cell-group style="padding:0px 15px;padding-top: 15px;">
					<van-field label-width="4.2rem" v-model="tel" type="tel" label="手机号" />
					<van-field label-width="4.2rem" v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码">
						<template #button>
							<van-button  size="small" type="primary">发送验证码</van-button>
						</template>
					</van-field>
					<van-field label-width="4.2rem" v-model="password" type="password" label="密码" />
					<van-field label-width="4.2rem" v-model="password" type="password" label="确认密码" />
				</van-cell-group>
				<van-button type="primary" @click="login" class="loginBtn">注册</van-button>
			</div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import header from '@/components/header/header.vue';
import { Field } from 'vant';
import { Button, Toast } from 'vant';
import { API_PATH } from '@/api/index.js';

import { setLocalStorage } from '@/util/local-storge.js';
// import { Field } from 'vant';
Vue.use(Field);
export default {
	name: 'login',
	components: {
		[header.name]: header,
		[Button.name]: Button
	},
	data() {
		return {
			value1: '',
			value2: ''
		};
	},
	mounted() {},
	methods: {
		register() {
			this.$router.push({ name: 'register' });
		},
		forgetPsw() {
			this.$router.push({ name: 'forget' });
		},
		// async loginExec() {
		//   const { data } = await this.$reqGet(API_PATH, {
		//     method: USER_LOGIN,
		//     user_mobile: this.mobile,
		//     user_pwd: this.password
		//   });
		//   let loginSts = true;
		//   if (data.code != 200 || data.status != 'success' || data.data == '') {
		//     Toast(data.detail);
		//     loginSts = false;
		//     this.isLogining = false;
		//   } else {
		//     setLocalStorage({
		//       user_id: data.data.uid
		//     });
		//   }
		//   return loginSts;
		// },
		async login() {
			const { data } = await this.$reqPost(USER_LOGIN, {
				username: this.value1,
				password: this.value2
			});
			console.log(data);
			if (data.code == 101) {
				Toast.fail(data.detail);
			}
			if (data.code == 100) {
				let token = data.data;
				setLocalStorage({
					user_token: token
				});
			}
		},
		async get() {
			const { data } = await this.$reqGet(USER_TEST, {});
		}
	}
};
</script>
<style scoped>
.van-field__label {
	width: 4em;
}
.hView {
	height: 100vh;
	background: #f7f7f7;
	overflow: hidden;
}

.loginCo {
	height: calc(100vh - 45px);
}
.loginCo .logo {
	background-size: 100% 100%;
	width: 100%;
	height: 50%;
	background-repeat: no-repeat;
	position: absolute;
	background-position-y: -70px;
	background-image: url(../../assets/images/loginBg.png);
}
.loginCo .logo img {
	display: inline-block;
	width: 70px;
}

.form-co {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 70%;
	-webkit-box-shadow: 1px 1px 10px 0px #adabab;
	box-shadow: 1px 1px 10px 0px #adabab;
	padding: 40px 30px;
	z-index: 999;
	background: #ffffff;
}
.van-cell {
	border: none;
	border-bottom: 1px solid #e3e3e3;
	font-size: 16px;
	margin-bottom: 15px;
	background: #ffffff;
}
[class*='van-hairline']::after {
	border: none;
}
.loginBtn {
	width: 75%;
	margin-top: 60px;
	background: #ff5d83;
	border: none;
}
.register {
	float: left;
	color: #ff4052;
}
.forget {
	float: right;
	color: #ff4052;
}

.txtwav {
	display: inline-block;
	color: #fbfbfb;
	font-weight: 700;
	font-size: 22px;
	margin-top: 45px;
	letter-spacing: 16px;
	font-family: sans-serif;
}
</style>
